<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        //正则表达式可用于执行所有类型的文本搜索和文本替换操作。
        //在JavaScript中，正则表达式也是对象。

        //search()  replace() 在day1的 08-字符串.html 中提到过 这里不再重复写
        //match()方法
        //在字符串中搜索与正则表达式的匹配项，然后将匹配项作为Array对象返回
        var str = 'POLLUTION: Air Pollution is introduction of chemicals to the atmosphere';
        var reg = str.match(/ion/g);
        document.write("原字符串: " + str + "<br>");
        document.write("g模式全局查找ion: " + reg + "<br><hr>");
        //g是全局匹配
        //i是不区分大小写
        //m是多行匹配
        //正则表达式模式：[abc]在方括号内找到任何字符(abc,a-z代表所有小写) [0-9]查找方括号内的任意数字 (x|y)任意替代项(就是查找x和y)
        //示例:
        var s = "The question is to be, or not to be 123";
        var patt = /[to]/g;
        var res = s.match(patt);
        document.write("原字符串:" + s + "<br>");
        document.write("查找所有的t和o: " + res + "<br>");
        var p = /[a-z]/g;
        res = s.match(p);
        document.write("查找所有小写字母[a-z]: " + res + "<br>");
        var q = /(to|is|be)/g;
        res = s.match(q);
        document.write("查找所有to  is  be : " + res + "<br><hr>");
        //元字符  \d查找一个数字 \W查找非文字字符 \s查找空格字符
        //量词    z+匹配任何包含至少一个z的字符串  z*0个或多个  z?0或1出现z的
        //示例:

        var x = /\d/g;
        res = s.match(x);
        document.write("查找一个数字: " + res + "<br>");
        var y = /\W/g;
        res = s.match(y);
        document.write("查找非文字字符: " + res + "<br>");
        var z = /\s/g;
        res = s.match(z);
        document.write("查找空格字符: " + res + "<br>");
        var x1 = /to+/g;
        res = s.match(x1);
        document.write("匹配任何包含至少一个to的字符串: " + res + "<br>");
        var x2 = /to*/g;
        res = s.match(x2);
        document.write("匹配0个到多个to的字符串: " + res + "<br>");
        var x3 = /to?/g;
        res = s.match(x3);
        document.write("匹配0或1出现的to的字符串: " + res + "<br><hr>");
        //接下来是RegExp方法
        //test()方法：根据结果返回true或false
        //exec()方法：找到的文本作为对象返回
        var ss = "www.cainiaojc.com";
        var regex = new RegExp("h");
        var r = new RegExp("n");
        var ans = regex.test(ss);
        document.write("原字符串: " + ss + "<br>");
        document.write("是否存在h: " + ans + "<br>");
        ans = r.test(ss);
        document.write("是否存在n: " + ans + "<br>");
        ans = regex.exec(ss);
        document.write("返回包含h的字符串: " + ans + "<br>");
        ans = r.exec(ss);
        document.write("返回包含n的字符串: " + ans + "<br>");

        function myFunc() {
            let str = document.getElementById("inp").value;
            document.getElementById("result").innerHTML = str.countVowels();
        }
        //String.prototype是给字符串对象上添加了新方法countVowels
        //所有String都能使用这个方法
        //相当于let x="hello world";  let count=text.countVowels();
        //字符串能直接调用方法
        String.prototype.countVowels = function() {
            let regex = new RegExp("[aeiou]", "gi");
            let x = this.match(regex);
            return (x === null ? 0 : x.length);
        }
    </script>
    <h1>计算字符串中元音的个数</h1>
    <p>再输入字段中输入一些文本显示元音数量</p>
    <!-- onkeyup是事件处理器，用户释放键盘按键时触发 -->
    <!-- autoconplete设置为off防止浏览器自动填充输入框，避免旧数据干扰输入 -->
    <input id="inp" type="text" onkeyup="myFunc()" autocomplete="off">
    <p>元音数量：<span id="result" style="color:red;"></span></p>
</body>

</html>